<template>
    <div class="z-50 text-sm">
        <div class="text-xs text-center font-bold text-[#b9b6b6]">历史记录</div>
        <!-- Ai会话框 -->
        <div v-for="(item, index) in items" :key="index">
            <div v-if="item.role === 'assistant'" class="flex p-2 items-start mb-2">
                <!-- Ai头像 -->
                <div class="w-8 rounded-full overflow-hidden mr-4">
                    <img class="avatar w-8"
                        src="https://sfile.chatglm.cn/testpath/7282e953-483d-581a-86a4-075aeda926a7_0.png?image_process=format,webp"
                        alt="">
                </div>
                <!-- AI对话框 -->
                <div class="bg-white max-w-56 rounded-2xl  border-2 border-solid border-[#7ea4dd] p-4">
                    {{ item.content }}
                </div>
            </div>
            <div v-else-if="item.role === 'user'" class="flex justify-end items-start mb-2 mr-2">
                <!-- 用户对话框 -->
                <div class="bg-white max-w-56 rounded-2xl p-4 border-2 border-solid border-[pink]">
                    {{ item.content }}
                </div>
                <!-- 用户头像 -->
                <div class="w-8 rounded-full overflow-hidden ml-4">
                    <img class="avatar w-8" 
                    :src="userAvatar"
                    alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>

defineProps({
    items: {
        type: Array,
        default: () => []
    }
});
const userAvatar = `https://img1.
baidu.com/it/u=193696007,
2125345610&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723136400&t=32e22ad3609913e1ce2a7ce798b82bc3`
</script>

<style lang="css" scoped>

</style>